<template>
	<view class="record-container">
		<view class="card" v-for="(item, index) in records" :key="index">
			<view class="left-area">
				<view :class="['status', item.status === 'true' ? 'success' : 'fail']">
					{{ item.status === 'true' ? '已通过' : '未通过' }}
				</view>
			</view>
			<view class="right-area">
				<view class="time starttime">
					开始时间：{{ item.start_time }}
				</view>
				<view class="time endtime">
					结束时间：{{ item.end_time }}
				</view>
				<view class="reason">
					加班理由：{{ item.reason }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	import {
		postotrecord
	} from "@/api/api.js"

	export default {
		data() {
			return {
				records: [],
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			handleOvertime() {
				postotrecord(
						this.userInfo.employee_id
					)
					.then(response => {
						if (response.length > 0) {
							//console.log(response.code);
							this.records = response;
						} else {
							uni.showModal({
								title: '暂无加班记录',
								showCancel: false
							});
						}
					})
					.catch(error => {
						console.log(error);
					});
			}

		},
		mounted() {
			this.handleOvertime();
		},


	}
</script>

<style lang="scss">
	.record-container {
		padding: 20upx;

		.card {
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 10upx;
			box-shadow: 0upx 2upx 6upx rgba(0, 0, 0, 0.16);
			margin-bottom: 20upx;

			.left-area {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				width: 160upx;

				.status {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 50upx;
					width: 120upx;
					color: #fff;
					border-radius: 5upx;
					font-size: 32upx;
					text-align: center;

					&.success {
						background-color: #07c160;
					}

					&.fail {
						background-color: #ff4949;
					}
				}
			}

			.right-area {
				flex: 1;
				padding: 20upx;

				.time {
					font-size: 32upx;
					margin-bottom: 10upx;
				}

				.reason {
					width: 400upx;
					font-size: 32upx;
					color: #999;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>